<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
    <title>Jcrop &raquo; Tutorials &raquo; aspectRatio w/ Preview</title>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
    <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
    <script type="text/javascript">

    jQuery(function($){

      // Create variables (in this scope) to hold the API and image size
      var jcrop_api, boundx, boundy;
      
      $('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 1
      },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        jcrop_api = this;
      });

      function updatePreview(c)
      {
        if (parseInt(c.w) > 0)
        {
          var rx = 100 / c.w;
          var ry = 100 / c.h;

          $('#preview').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
      };

    });

  </script>

  </head>

  <body>

  <div id="outer">
  <div class="jcExample">
  <div class="article">

    <h1>Jcrop - Aspect ratio w/ preview pane</h1>

    <table>
      <tr>
        <td>
          <img src="demo_files/pool.jpg" id="target" alt="Flowers" />
        </td>
        <td>
          <div style="width:100px;height:100px;overflow:hidden;">
            <img src="demo_files/pool.jpg" id="preview" alt="Preview" class="jcrop-preview" />
          </div>
        </td>
      </tr>
    </table>

    <p>
      <b>An example implementing a preview pane.</b>
        Obviously the most visual demo, the preview pane is accomplished
        entirely outside of Jcrop with a simple jQuery-flavored callback.
        This type of interface could be useful for creating a thumbnail
        or avatar. The onChange event handler is used to update the
        view in the preview pane.
    </p>

    <div id="dl_links">
      <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
      <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
    </div>


  </div>
  </div>
  </div>
  </body>

</html>
